<template>
    <div id="con">
        <div class="loginhead">
            <div>
                <img :src="bg[0]" width="224" height="50" class="fl">
                <div class="fl findpw">找回密码</div>
            </div>
        </div>
        <div class="resetpw">
            <div class="w1200">
                <div class="step" :class="{step1:step=='step1', step2:step=='step2', step3:step=='step3'}">
                </div>
                <div class="form" v-show="step=='step1'">
                    <form class="form-horizontal" role="form" v-on:submit.prevent="getvalidcode" autocomplete="off" >
                        <div class="form-group" v-show="tipshow">
                            <div class="col-md-6 col-md-offset-3 orange">
                                <p>请输入正确的手机号</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                <input type="text" class="form-control" required placeholder="请输入手机号码" id="phoneNo" v-model="phoneNo" @blur="phoneNoValidator" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-3 col-md-offset-3">
                                <input type="text" class="form-control" placeholder="输入手机短信验证" required v-model="validcode">
                            </div>
                            <div class="col-md-3">
                                <button v-show="isgetted" class="btn btn-warning" @click="getphonecode">获取短信验证码</button>
                                <button v-show="!isgetted" class="btn btn-default" disabled="disabled">重新发送({{second}})</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3 next">
                                <button type="submit">下一步</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="form" v-show="step=='step2'">
                    <form class="form-horizontal" role="form" v-on:submit.prevent="pwreset">
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                <input type="password" class="form-control" required placeholder="设置新密码" v-model="pw1" />
                            </div>
                            <div class="col-md-6 col-md-offset-3">
                                <p class="grey">密码由6-20位数字、字母、符号组成</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                <input type="password" class="form-control" required placeholder="再次确认新密码" v-model="pw2" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3 next">
                                <button type="submit">重设密码</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="form" v-show="step=='step3'">
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <p class="pwsuccess">恭喜您，密码重置成功！</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3 next">
                            <button @click="gotologin">马上去登录</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <p class="grey returnlogin">30后自动返回登路页面</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="login_foot">版权所有：创业软件股份有限公司 Copyright © 2008-2017 BSOFT</div>
    </div>
</template>
<script>
var md5 = require("md5");
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
var login_logo = require("assets/img/login_logo.png");
import 'assets/reset.css';
import Public from 'assets/public.js'
export default {
    data() {
            return {

                bg: [login_logo],
                step: "step1",
                phoneNo: "",
                isvalid: false,
                tipshow: false,
                second: "60",
                isgetted: true,
                pw1: "",
                pw2: "",
                validcode:"",
            }
        },
        components: {


        },
        ready() {
        },
        methods: {
            getvalidcode() {
                var that=this;
                    if (this.isvalid) {
                         $.when(Public.commonajax("base.smsService", "validateCode", `['${this.phoneNo}','${this.validcode}']`))
                            .done(function(res) {
                                if (res.code == 200) {
                                    Public.ajaxPrompt("验证通过");
                                    that.step = "step2"
                                } else {
                                    Public.ajaxPrompt(res.msg);
                                }

                            })
                      
                    } else {
                        return
                    }

                },
                pwreset() {
                    var that = this;
                    var reg = /[^\u4e00-\u9fa5]{6,20}$/;
                    var md5pw=md5(this.pw1);
                   
                    if (reg.test(that.pw1) && reg.test(that.pw1) && that.pw1 === that.pw2) {
                        $.when(Public.commonajax("coms.register", "findPassword", `['coms.xiangtan','','${this.phoneNo}','${md5pw}']`))
                            .done(function(res) {
                                if (res.code == 200) {
                                   that.step = "step3"
                                } else {
                                    Public.ajaxPrompt(res.msg);
                                }

                            })
                    }else{
                         Public.ajaxPrompt("请确认输入是否正确")
                    }
   
                },
                gotologin() {
                    window.location.href = "login.html"

                },
                // 验证手机
                phoneNoValidator() {
                    if (this.phoneNo.length > 0) {
                        if (this.phoneNo.length == 11) {
                            if (/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(this.phoneNo)) {
                                this.isvalid = true;
                                this.tipshow = false;
                            }
                        } else {
                            this.isvalid = false;
                            this.tipshow = true;
                        }
                    } else {
                        this.isvalid = false;
                        this.tipshow = true;
                    }
                },
                getphonecode() {
                    var that = this;
                    if (this.isvalid) {
                        $.when(Public.commonajax("base.smsService", "getIdentifyingCode", `['coms.xiangtan','','${this.phoneNo}','register']`))
                            .done(function(res) {
                                if (res.code == 200) {
                                    that.isgetted = false;
                                    var timeinter = setInterval(function() {
                                        that.second--;
                                    }, 1000);
                                    if (that.second < 0) {
                                        clearInterval(timeinter);
                                    }
                                    setTimeout(function() {
                                        that.isgetted = true;
                                    }, 60000);
                                    that.second = 60;
                                } else {
                                    Public.ajaxPrompt(res.msg);
                                }

                            })
                    } else {
                        return
                    }

                }
        },
        watch: {
            'step' (val, oldval) {
                if (val == "step3") {
                    setTimeout(function() {
                        window.location.href = "login.html"
                    }, 30000)
                }
            }
        }

}
</script>
<style scoped>
/*.swiper-container {
    height: 513px;
    width: 1200px;
    margin: 0 auto;
}*/

div#con {
    width: 100%;
    height: 100%
}

.loginhead {
    width: 100%;
    background: #fff;
    padding: 10px 30px;
    position: fixed;
    top: 0;
    z-index: 999999999999
}

.loginhead>div {
    width: 1200px;
    margin: 0 auto;
}

.loginhead>div img:nth-child(2) {
    margin-top: 11px;
}

.login_foot {
    width: 100%;
    background: #fff;
    text-align: center;
    font-size: 12px;
    color: #b7b6b6;
    height: 60px;
    line-height: 60px;
    position: fixed;
    bottom: 0;
    z-index: 999999999999
}

.findpw {
    color: #02a35c;
    font-weight: bold;
    border-left: #c9c9c9 1px solid;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: 30px;
    font-size: 18px;
}

.resetpw {
    background: #f2f2f2;
    height: 100%;
}

.resetpw .w1200 {
    width: 1200px;
    margin: 0 auto;
    padding: 90px 0;
    background: url(../../assets/img/flower.png) no-repeat 950px 345px;
}

.step {
    background: url(../../assets/img/pwstep1.png) no-repeat center;
    width: 710px;
    height: 65px;
    margin: 30px auto;
}

.step1 {
    background: url(../../assets/img/pwstep1.png) no-repeat center
}

.step2 {
    background: url(../../assets/img/pwstep2.png) no-repeat center;
}

.step3 {
    background: url(../../assets/img/pwstep3.png) no-repeat center;
}

.form {
    width: 710px;
    margin: 30px auto;
    background: #fff;
    height: 330px;
    border-radius: 10px;
    padding-top: 40px
}

.next {
    margin-top: 20px
}

.next button {
    display: block;
    height: 42px;
    line-height: 42px;
    width: 100%;
    border-radius: 5px;
    color: #fff;
    outline: none;
    background: #1dc499;
}

.orange p {
    color: #fff;
    background: #fc8a5d;
    line-height: 24px;
    padding-left: 20px
}

#phoneNo {
    background: url(../../assets/img/usericon.png) no-repeat 10px center;
    padding-left: 40px;
}

.grey {
    color: #999999;
}

.pwsuccess {
    background: url(../../assets/img/c_ok.png) no-repeat 10px center;
    padding-left: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    color: #02a35c;
}

.returnlogin {
    text-align: center;
    height: 40px;
    line-height: 40px
}
</style>
